<template>
  <div class="edit-pass">
    <div class="title">
      修改密码
    </div>
    <el-form
      size="large"
      ref="passFormRef"
      :model="passForm"
      :rules="rules"
      label-width="90px"
      label-position="left"
    >
      <el-form-item prop="pass" label="新密码：">
        <el-input v-model="passForm.pass" show-password/>
      </el-form-item>
      <el-form-item prop="checkPass" label="确认密码：">
        <el-input v-model="passForm.checkPass" show-password/>
      </el-form-item>
      <el-form-item style="margin-top: 3rem;">
        <el-button color="#4dcdef" size="large" class="button" @click="submitForm(passFormRef)">
          <span class="button_text">保存</span>
        </el-button>
        <el-button type="info" size="large" class="button" @click="resetForm(passFormRef)">
          <span class="button_text">重置</span>
        </el-button>
        <el-button color="#e15958" size="large" class="button" @click="cancel">
          <span class="button_text">取消</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ElMessage, ElNotification } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { updateUserInfo } from '../api/api';
import { useStore } from '../stores';
import { encryptDES } from '../features/Des';

const passForm = ref({
  pass: '',
  checkPass: ''
})
const passFormRef = ref()

// 验证两次密码
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入新密码'))
  } else {
    if (passForm.value.checkPass !== '') {
      if (!passFormRef.value) return
      passFormRef.value.validateField('checkPass', () => null)
    }
    setTimeout(() => {
      // 验证密码只能包含字字母、数字、下划线
      let reg = /^\w+$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('只支持数字字母下划线'))
      }
    }, 500);
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请在再次输入密码'))
  } else if (value !== passForm.value.pass) {
    callback(new Error("两次密码不匹配"))
  } else {
    callback()
  }
}
// rules
const rules = ref({
  pass: [
    { validator: validatePass, trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度需要在6到20位之间', trigger: 'blur' }
  ],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }]
})

const router = useRouter()
const store = useStore()
// submit
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // 使用des加密
      let newpass = encryptDES(passForm.value.checkPass)
      // 更新服务器
      updateUserInfo(store.id, { password: newpass }).then(response => {
        ElNotification({
          title: '修改成功',
          message: '密码已更新',
          type: 'success'
        })
      }).catch(error => {
        console.log(error)
        ElNotification({
          title: '修改失败',
          message: error.message,
          type: 'error'
        })
      })
      return true
    } else {
      ElNotification({
        title: '修改失败',
        message: '请规范填写后重新提交',
        type: 'error'
      })
      return false
    }
  })
}
// rest
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
// 取消
const cancel = async() => {
  router.go(-1)
  ElMessage('已取消')
}
</script>

<style scoped>
.edit-pass {
  height: 100%;
  width: 100%;
}
.title {
  text-align: left;
  font-size: 1.5rem;
  line-height: 3rem;
  font-weight: 600;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.button {
  width: 30%;
  box-shadow: var(--el-box-shadow-light);
}
.button_text {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
}
</style>